@extends('public.base')
@section('body')
<div class="layui-fluid" style="max-width: 960px;">
    <div class="layui-row">
        <div class="layui-card">
            <div class="layui-card">
                <div class="layui-card-header">
                    <h1 style="text-align: center; color: red; font-size:large; font-weight: bold">
                        安全无小事，请务必绑定OTP验证器</h1>
                </div>
                <div class="layui-card-body">
                    <div class="layui-row layui-col-space15">
                        <div class="layui-col-md3">
                            <div class="layui-card">
                                <div class="layui-collapse">
                                    <div class="layui-colla-item">
                                        <h2 class="layui-colla-title"
                                            style="padding:0;text-align:center;height:39px;line-height:39px;">
                                            请扫描下方二维码</h2>
                                        <div class="layui-colla-content layui-show auth_qrcode" style="text-align: center">

                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="layui-col-md9">
                            <form id="main_form" class="layui-form layui-form-pane" action=""
                                  lay-filter="main_form">
                                <div class="layui-card">
                                    <div class="layui-collapse">
                                        <div class="layui-colla-item">
                                            <h2 class="layui-colla-title"
                                                style="padding:0;text-align:center;height:39px;line-height:39px;">
                                                绑定OTP验证码操作</h2>
                                            <div class="layui-colla-content layui-show">
                                                <div class="layui-card-body layui-text">
                                                    <table class="layui-table">
                                                        <colgroup>
                                                            <col width="150">
                                                            <col>
                                                        </colgroup>
                                                        <tbody>
                                                        <tr>
                                                            <td style="color: red">第一步</td>
                                                            <td>
                                                                下载下方相应手机软件并进行安装
                                                            </td>
                                                        </tr>
                                                        <tr>
                                                            <td>Android下载地址</td>
                                                            <td>
                                                                <a href="https://play.google.com/store/apps/details?id=com.google.android.apps.authenticator2"
                                                                   target="_blank" style="padding-left: 15px;">Google
                                                                    Pay</a>
                                                                <div class="android_qrcode">


                                                                </div>
                                                            </td>
                                                        </tr>
                                                        <tr>
                                                            <td>IOS下载地址</td>
                                                            <td>
                                                                <a href="https://itunes.apple.com/us/app/google-authenticator/id388497605"
                                                                   target="_blank"
                                                                   style="padding-left: 15px;">iTunes</a>
                                                               <div class="ios_qrcode">


                                                               </div>

                                                            </td>
                                                        </tr>
                                                        <tr>
                                                            <td>问题处理</td>
                                                            <td>A、苹果(iphone)手机，请从App Store搜索：Google Authenticator 安装

                                                                <br> B、安卓手机可以在您常用的应用市场搜索“身份验证器”进行安装
                                                            </td>
                                                        </tr>
                                                        <tr>
                                                            <td style="color: red">第二步</td>
                                                            <td>
                                                                打开软件进行左侧二维码扫描
                                                            </td>
                                                        </tr>
                                                        <tr>
                                                            <td>问题处理</td>
                                                            <td>如遇登陆有问题请联系管理员</td>
                                                        </tr>
                                                        <tr>
                                                            <td style="color: red"></td>
                                                            <td style="padding-bottom: 0;">
                                                                <div class="layui-btn-container">
                                                                    <?php
                                                                    if (empty($_REQUEST['step'])) {
                                                                        ?>
                                                                        <button id="otp_ignore"
                                                                                class="layui-btn layui-btn-fluid layui-btn-danger"
                                                                                lay-filter="LAY-user-login-submit">暂不处理
                                                                        </button>
                                                                        <button id="otp_bind_btn"
                                                                                class="layui-btn layui-btn-fluid "
                                                                                lay-submit
                                                                                lay-filter="LAY-user-login-submit">
                                                                            扫描后，点击此确认绑定，并继续下一步
                                                                        </button>
                                                                        <?php
                                                                    } else {
                                                                        ?>
                                                                        <button id="otp_bind_btn2"
                                                                                class="layui-btn layui-btn-fluid "
                                                                                lay-submit
                                                                                lay-filter="LAY-user-login-submit">
                                                                            扫描后，点击此确认绑定。
                                                                        </button>
                                                                        <?php
                                                                    }
                                                                    ?>
                                                                </div>
                                                            </td>
                                                        </tr>
                                                        </tbody>
                                                    </table>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>

                    <div class="layui-row">
                        <blockquote class="layui-elem-quote">
                            <b>操作提示：</b>为了系统安全，请务必绑定OTP。如遇登录问题或OTP信息丢失，请及时联系管理员或平台客服处理。
                        </blockquote>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 误删，这里是显示帮助说明文，会调用系统菜单中的说明文档 -->
    <div id="page_tip"></div>

    <script src="{{ADMIN_PATH}}layui/layuiadmin/layui/layui.js"></script>
    <script src="{{ADMIN_PATH}}jquery/dist/jquery.js"></script>
    <script src="{{ADMIN_PATH}}jquery/dist/jquery-qrcode-0.14.0.js"></script>
    <script>
        $(".android_qrcode").qrcode({ size: 100,text: "https://play.google.com/store/apps/details?id=com.google.android.apps.authenticator2"});
        $(".ios_qrcode").qrcode({ size: 100,text: "https://itunes.apple.com/us/app/google-authenticator/id388497605"});
        $(".auth_qrcode").qrcode({ size: 200,text: "{{$qr_code_url}}"});
        layui.config({
            base: '{{ADMIN_PATH}}layui/layuiadmin/' //静态资源所在路径
        }).extend({
            index: '/lib/index' //主入口模块
        }).use(['index', 'user'], function(){
            var $ = layui.jquery
                , admin = layui.admin;


            $('#otp_ignore').on('click', function () {
                location.href = '{{url('admin/index/index')}}'; //后台主页
                return false;
            });

            $("#otp_bind_btn").on('click', function () {
                var bindurl = '{{url('admin/login/bind_opt')}}';
                layer.confirm('请确定是否已扫描并正确绑定，否则会造成账号无法登录?', function (index) {
                    admin.req({
                        url:bindurl //实际使用请改成服务端真实接口
                        , data: {secret:'{{$secret}}'}
                        , method: 'post'
                        , done: function (res) {
                            if(res.status==200) {
                                layer.msg('邦定成功', {
                                    offset: '15px'
                                    , icon: 1
                                    , time: 3000
                                }, function () {
                                    location.href = '{{url('admin/public/login')}}'; //后台主页
                                });
                            }else{
                                layer.msg(res.message, {icon: 0});
                            }
                        }
                    });

                }, function (index) {

                });
                return false;
            });

        });

</script>
@stop